<template xmlns:v-on="http://www.w3.org/1999/xhtml">
<div>


    <div class="set" style="height: 100%;">
        <div class="main_rightTop">
            <p>在职培训</p>
            <p class="addTitle" @click="addTitle()">添加文档</p>
        </div>
        <div class="main_rightMain">
            <div class="noticNav">
                <span>文档标题</span>
                <!-- <span>是否显示</span> -->
                <span>最后修改时间</span>
                <span>设置</span>
            </div>
            <ul v-if="items.length>0">
                <li v-for="(item,index) in items" :key="index">
                    <!-- <p>{{item.title}}</p> -->
                    <div >
                        <div class="noticNavs">
                            <span >{{item.contentTitle}}</span>
                            <!-- <span>{{item.isView | typeFun}}</span> -->
                            <span>{{item.lastMdfTime | Date}}</span>
                            <span>
                                <p ><img  :title="a" @click='compile(index)' src="../../../../static/img/iconfont-bianji.png" alt=""></p>
                                <p ><img :title="b"  @click='remove(index)' src="../../../../static/img/delete.png" alt=""></p>
                                <p   v-if="item.isCarousel==1"><img   :title="d" @click="carousel(index)" src="../../../../static/img/iconfont-lunbo-zixun-no.png" alt=""></p>
                                <p   v-else><img :title="c" @click="carousel(index)" src="../../../../static/img/iconfont-lunbo-zixun.png" alt=""></p>
                            </span>
                        </div>
                        
                    </div>

                </li>
            </ul>
            <ul v-else style="color:#303030;font-size:20px;text-align:center;margin-top:40px;border-bottom:none">暂无数据</ul>
            <div class="pagination" v-show="items.length>0">
       	        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    small
                    layout="prev, pager, next"
                    :total="totals">
                </el-pagination>
            </div>
        </div>
    </div>
        <!-- 删除弹出框 -->
    <div class="removebackground" v-show="removeBox">
        <div class="removeBox">
            <div class="hint">提示</div>
           <div class="removeBoxTop">确认要删除该文档？</div>
           <div class="removeBoxBot">
               <div class="affirm" @click="affirm">确认</div>
               <div class="cancal" @click="cancal">取消</div>
           </div>
        </div>
    </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex';
    export default {
        name: '',
        data() {
            return {
                a:'编辑',
                b:'删除',
                c:'取消轮播',
                d:'设为轮播',
                currentPage:1,
                items:[],
                isCarousel:'',
                totals:0,
                 removeBox:false,
                 removeIndex:''
            }
        },
        created: function () {
                sessionStorage.removeItem('detail')
                sessionStorage.removeItem('Title')
                sessionStorage.removeItem('contentId')
                let self = this 
                self.getcontentGet({
                     columnId:sessionStorage.getItem('columnId'),
                     type:sessionStorage.getItem('columnShowType'),
                     pageNo:self.currentPage,
                     pageSize:10
                }).then((data)=>{
                    if(data.code == '000000'){
                        if(data.data.records.length == 0){
                              
                        }else{
                            self.items = data.data.records
                            self.totals = data.data.total
                        }
                    }else{
                        this.$message({
                            type:'info',
                            message:data.msg
                        })
                    }
                }).catch(msg=>{
                    this.$message({
                        type:'info',
                        message:msg.error
                    })
                })
        },
         filters: {
            typeFun(val) {
            if (val == 1) {
                return "是";
            } else {
                return "否";
            }
            },
                Date(val) {
      if (val) {
                    var now = new Date(val);
                    var year = now.getYear() - 100;
                    var month = now.getMonth() + 1;
                    month = month > 9 ? month : "0" + month;
                    var date = now.getDate();
                    date = date > 9 ? date : "0" + date;
                    var hour = now.getHours();
                    hour = hour > 9 ? hour : "0" + hour;
                    var minute = now.getMinutes();
                    minute = minute > 9 ? minute : "0" + minute;
                    return "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute;
                } else {
                    return "暂无"
                }
    }
        },
        watch: {

        },
        methods: {
            addTitle(){
                this.$router.push({
                    path:'/home/message/addconsulting',
                    query:{columnId:sessionStorage.getItem('columnId'),name:this.$route.path.split('/')[3]}
                }) 
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                let self = this
                self.currentPage = val
                self.getcontentGet({
                     columnId:sessionStorage.getItem('columnId'),
                     type:sessionStorage.getItem('columnShowType'),
                     pageNo:val,
                     pageSize:10
                }).then((data)=>{
                    if(data.code == '000000'){
                        if(data.data.records.length == 0){
                              
                        }else{
                            self.items = data.data.records
                        }
                    }else{
                        this.$message({
                            type:'info',
                            message:data.msg
                        })
                    }
                }).catch(msg=>{
                    this.$message({
                        type:'info',
                        message:msg.error
                    })
                }) 

            },
            // 编辑文档
            compile(index){
                let self = this
                sessionStorage.setItem('Title',this.items[index].contentTitle)
                sessionStorage.setItem('contentId',this.items[index].contentId)
                self.getcontentdetail({
                    columnId:sessionStorage.getItem('columnId'),
                    contentId:self.items[index].contentId
                }).then((data)=>{
                    if(data.code == '000000'){
                        sessionStorage.setItem('detail',JSON.stringify(data.data))
                        this.$router.push({
                            path:'/home/message/compileonJob'
                        })
                    }else{
                        this.$message({
                            type:'info',
                            message:data.msg
                        })
                    }
                }).catch(msg=>{
                    this.$message({
                        type:'info',
                        message:msg.statusText
                    })
                })
                
            },
             // 确认删除文档
            affirm(){
                let self = this
                let isCarousel = self.items[self.removeIndex].isCarousel
                if(isCarousel == 0){
                    this.$message({
                        type:'info',
                        message:'已设为轮播，不可删除！'
                    })
                    self.removeBox = false
                }else{
                self.getcontentDelete({
                    contentId:self.items[self.removeIndex].contentId,
                    type:1
                }).then((data)=>{
                    if(data.code == '000000'){
                        this.$message({
                            type:'success',
                            message:'删除成功!'
                        })
                        self.removeBox = false
                        self.getcontentGet({
                            columnId:sessionStorage.getItem('columnId'),
                            type:sessionStorage.getItem('columnShowType'),
                            pageNo:self.currentPage,
                            pageSize:10
                        }).then((data)=>{
                            if(data.code == '000000'){
                                if(data.data.records.length == 0){
                                     self.items = [] 
                                }else{
                                    self.items = data.data.records
                                }
                            }else{
                                this.$message({
                                    type:'info',
                                    message:data.msg
                                })
                            }
                        }).catch(msg=>{
                            this.$message({
                                type:'info',
                                message:msg.error
                            })
                        })  
                    }else{
                       this.$message({
                        type:'info',
                        message:data.msg
                    }) 
                    }
                }).catch(msg=>{
                    this.$message({
                        type:'info',
                        message:msg.statusText
                    })
                })
                }
            },
            // 取消删除
            cancal(){
                this.removeBox = false
            },
            // 删除文档
            remove(index){
                let self = this
                self.removeBox = true
                self.removeIndex = index
               
            },
            // 设为轮播
            carousel(index){
                let self = this
                if(self.items[index].isCarousel == 1){
                    self.isCarousel = 0
                }else if(self.items[index].isCarousel == 0){
                    self.isCarousel = 1
                }
                self.getcontentUpdate({
                    oid:sessionStorage.getItem('orgId'),
                    contentId:self.items[index].contentId,
                    isCarousel:self.isCarousel
                }).then((data)=>{
                    if(data.code == '000000'){
                     self.getcontentGet({
                     columnId:sessionStorage.getItem('columnId'),
                     type:sessionStorage.getItem('columnShowType'),
                     pageNo:self.currentPage,
                     pageSize:10
                }).then((data)=>{
                    if(data.code == '000000'){
                        if(data.data.records.length == 0){
                              
                        }else{
                            self.items = data.data.records
                        }
                    }else{
                        this.$message({
                            type:'info',
                            message:data.msg
                        })
                    }
                }).catch(msg=>{
                    this.$message({
                        type:'info',
                        message:msg.error
                    })
                }) 
                this.$message({
                    type:'success',
                    message:'设置成功！'
                })
                    }else{
                        this.$message({
                        type:'info',
                        message:data.msg
                    })
                    }
                }).catch(msg=>{
                    this.$message({
                        type:'info',
                        message:msg.statusText
                    })
                })
            },
            ...mapActions(['getcontentGet','getcontentDelete','getcontentUpdate','getcontentdetail'])

        }
    }

</script>
<style scoped>
    .addTitle{
        float: right;
        margin-top: -40px;
        margin-right: 30px;
        cursor: pointer;
        width: 70px;
        height: 30px;
        background-color: #e7744a;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 4px;
    }
	.pagination{
		float: right;
		margin-right: 20px;
	}
    .main_rightTop p:nth-child(1) {
        color: #303030;
        font-size: 14px;
        padding-top: 24px;
        padding-bottom: 12px;
        margin-left: 44px;
        /* width: calc(100% - 88px); */
        border-bottom: 1px solid #d9d9d9;
    }
    
    .main_rightTop {
        width: 100%;
    }
    
    .main_rightMain {
        margin-left: 44px;
        width: calc(100% - 88px);
    }
    
    .noticNav {
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: #f4f4f6;
        margin-top: 20px;
    }
    .noticNavs {
        width: 100%;
        height: 48px;
        line-height: 48px;
        /* background: #f4f4f6; */
        /* margin-top: 20px; */
    }
    .noticNavs span:nth-child(3) p{
        width: 33%;
        height: 40px;
        float: left;
    }
     .noticNavs span:nth-child(3) p img{
         width: 24px;
         height: 24px;
         cursor: pointer;
     }
    .noticNavs span:nth-child(1){
        width: 33.3333333333333333%;
        text-align: left;
        padding-left: 24px;
    }
    .noticNavs span{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        float: left;
        width: 33.3333%;
        text-align: center;
    }
    .noticNav span:nth-child(1){
        width: 33.3333333333333333%;
        text-align: left;
        padding-left: 24px;
    }
    .noticNav span{
        float: left;
        width: 33.333333333333%;
        text-align: center;
    }
    /* .noticNav span:nth-child(1) {
        float: left;
        margin-left: 24px;
    }
    
    .noticNav span:nth-child(2) {
        float: right;
        margin-right: 134px;
    } */
    ul li{
        height: 48px;
        border-bottom: 1px solid #d9d9d9;
    }
    ul li>p{
        height: 48px;line-height: 48px;margin-left: 24px;cursor: pointer;
    }
    .biaoti{
        float: left;
    }

    .unread{
        float: left;margin-left: 189px;
    }
    .grayfont{
        color: #8f8e94;
    }
    .borderStyle{
        cursor: pointer;
        font-size: 12px;
        color: #fcb298;
        width: 48px;display: inline-block;border: 1px solid #fcb298;height: 20px;line-height:20px;border-radius: 17px;text-align: center;
    }
      .removebackground{
        width: 100%;
        height: 100%;
        position: fixed;
        left:0;
        top: 0;
        background-color: rgba(0,0,0,0.1)
    }
    .removeBox{
        width: 340px;
        height: 180px;
        background-color: #fff;
        border: solid 1px #ffd0bf;
        box-shadow: 0 2px 4px 0 #dbdbdb;
        border-radius: 4px;
        margin: calc((100vh - 280px) / 2) auto;
        z-index: 100000;
    }
    .removeBoxTop{
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 90px;
        color: #303030;
        font-size: 16px;
    }
    .removeBoxBot{
        width: 100%;
        height: 90px;
        margin-top: 30px;
        margin-left: 80px;
        
    }
    .affirm{
        color: #e7744a;
        border: 1px solid #e7744a;
        text-align: center;
        width: 80px;
        height: 36px;
        line-height: 36px;
        float: left;
        font-size: 14px;
        cursor: pointer;
        border-radius: 4px;
    }
    .cancal{
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        color: #303030;
        border: 1px solid #000;
        text-align: center;
        width: 80px;
        height: 36px;
        line-height: 36px; 
        float: left;
        margin-left: 20px;
    }
    .hint{
        width: 100%;
        height: 30px;
        text-align: center;
        font-size: 20px;
        margin-top: 10px;
        line-height: 30px;
    }
</style>

<!--父组件中引入items-->
  <!--<items  :model='model' v-for='model in data'></items>-->



